<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="../首页/demo1.css" />
    <!-- swiper -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.css"
    />
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <!-- vue语法 -->
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div id="demo1">
      <!-- 头部 -->
      <div class="box1-all">
        <div class="box1">
          <img src="../../img/2.png" alt="" />
          <div class="box1-right">
            <img src="../../img/3.png" alt="" />
            <div>咨询我们:12345678900</div>
          </div>
        </div>
      </div>

      <!-- 轮播 -->
      <div class="carousel">
        <div class="carousel-top">
          <div class="one" v-for="item in toplist" :key="item.id">
            <a :href="item.url">{{item.text}}</a>
          </div>
          <!-- <div class="one">
            <a href="../网站开发/网站开发.html">网站开发</a>
          </div>
          <div class="one"><a href="../APP开发/APP开发.html">APP开发</a></div>
          <div class="one">
            <a href="../小程序开发/小程序开发.html">小程序开发</a>
          </div>
          <div class="one"><a href="../案例/案例.html">案例</a></div>
          <div class="one">
            <a href="../关于我们/关于我们.html">关于我们</a>
          </div> -->
        </div>
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
          </div>
          <!--如果需要滚动条-->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- 优质服务 -->
      <div class="site">
        <div class="industry1">优质的服务</div>
        <div class="industry2">
          提供全方位的互联网+产品及服务，与客户共同成长，共创价值
        </div>
        <div class="line">
          <div></div>
        </div>
      </div>
      <!-- 单个图片 -->
      <div class="photos">
        <img src="../../img/服务.png" alt="" />
      </div>
      <!-- 行业解决方案 -->
      <div class="case">
        <div class="industry1">行业解决方案</div>
        <div class="industry2">
          您的心原就是我的心愿，为您服务就是我的职责。
        </div>
        <div class="line">
          <div></div>
        </div>
        <div class="bottom-all">
          <div class="bottom" v-for="item in list" :key="item.id">
            <div><img :src="item.img" alt="" /></div>
            <div>{{item.text}}</div>
            <div>{{item.text1}}</div>
          </div>
        </div>
      </div>
      <!-- 经典案例 -->
      <div class="classic">
        <div class="industry1">行业解决方案</div>
        <div class="industry2">
          您的心原就是我的心愿，为您服务就是我的职责。
        </div>
        <div class="line">
          <div></div>
        </div>
        <div class="box4">
          <div v-for="item in photo" :key="item.id">
            <img :src="item.img" alt="" />
          </div>
        </div>
      </div>
      <!-- 软件开发流程 -->
      <div class="exploitation">
        <div class="industry1">软件开发流程</div>
        <div class="process-all">
          <div class="process" v-for="item in process" :key="item.id">
            <div class="process1">
              <img class="image1" :src="item.img" alt="Sample Image" />
            </div>
            <div class="process1">
              <img
                class="image2"
                :src="item.img1"
                alt="Image 2"
                style="display: none"
              />
            </div>
            <div>{{item.text}}</div>
          </div>
        </div>
        <div class="line1"></div>
        <div class="line2">
          <div class="round"></div>
          <div class="round"></div>
          <div class="round"></div>
          <div class="round"></div>
          <div class="round"></div>
          <div class="round"></div>
          <div class="round"></div>
        </div>
        <div class="bottom">
          <div class="left">
            <div>需求分析</div>
            <div>
              产业事业部主要负责为产教融合而搭建创新谷产业基地、各校区孵化中心，并通过基地平台分批次引入各校区学生进行工学交替、实训实习分批次进行达标考核，对考核达标者负责向一线城市推介就业，并保证安置到位。
            </div>
          </div>
          <div class="right">
            <img src="../../img/人工智能.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 合作共赢 -->
      <div class="cooperate">
        <div class="industry1">合作共赢</div>
        <div class="industry2">和谐创新、开拓市场、团结拼搏、共创未来</div>
        <div class="line">
          <div></div>
        </div>
        <div class="box4">
          <div v-for="item in images" :key="item.id">
            <img :src="item.img" alt="" />
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="below">
        <div class="top">
          <div class="left">
            <div class="change">山东柏瑞设计有限公司</div>
            <div class="change">联系电话:12345678900</div>
            <div class="change">
              地址:济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南)
            </div>
          </div>
          <div class="right">
            <div><img src="../../img/柏瑞.png" alt="" /></div>
            <div>微信公众号</div>
          </div>
        </div>
        <div class="bottom">
          <div>
            Shandong Bairui software Technology Co.
            Ltd.山东柏瑞软件科技有限公司版权所有 鲁ICP备17006298号-1
          </div>
        </div>
      </div>
    </div>
    <script>
      // 鼠标经过变颜色
      $(document).ready(function () {
        $(".process").mouseenter(function () {
          $(this).find(".process1 .image1").css({ display: "none" });
          $(this).find(".process1 .image2").css({ display: "block" });
        });
        $(".process").mouseleave(function () {
          $(this).find(".process1 .image2").css({ display: "none" });
          $(this).find(".process1 .image1").css({ display: "block" });
        });
      });
      // vue实例
      //使用 vue3 的基本格式
      const { createApp, ref } = Vue;
      const demo1 = createApp({
        // 逻辑代码全部写在setup里面
        // 因为没有语法糖，无论是定义的"变量"或者"函数"都必须！
        // 把名称再多写一次！放在在最后return里面
        setup() {
          //测试变量
          // 头部列表
          const toplist = ref([
            { id: 1, text: "首页", url: "../首页/首页.html" },
            { id: 2, text: "网站开发", url: "../网站开发/网站开发.html" },
            { id: 3, text: "APP开发", url: "../APP开发/APP开发.html" },
            { id: 4, text: "小程序开发", url: "../小程序开发/小程序开发.html" },
            { id: 5, text: "案例", url: "../案例/案例.html" },
            { id: 6, text: "关于我们", url: "../关于我们/关于我们.html" },
          ]);
          // 列表循环
          const list = ref([
            {
              id: 1,
              img: "../../img/app.png",
              text: "APP/小程序应用解决方案",
              text1:
                "APP/微信公众平台/小程序定制开发，可提供微商城、活动，红包、投票、签到、业务流、订购、积分、抽奖等功能定制，根据您的需求为您贴身打造。",
            },
            {
              id: 2,
              img: "../../img/网站定制.png",
              text: "网站定制",
              text1:
                "APP/微信公众平台/小程序定制开发，可提供微商城、活动，红包、投票、签到、业务流、订购、积分、抽奖等功能定制，根据您的需求为您贴身打造。",
            },
            {
              id: 3,
              img: "../../img/系统开发.png",
              text: "系统开发",
              text1:
                "APP/微信公众平台/小程序定制开发，可提供微商城、活动，红包、投票、签到、业务流、订购、积分、抽奖等功能定制，根据您的需求为您贴身打造。",
            },
          ]);
          // 图片循环
          const photo = ref([
            { id: 1, img: "../../img/难忘的人1.png" },
            { id: 2, img: "../../img/难忘的人2.png" },
            { id: 3, img: "../../img/难忘的人3.png" },
            { id: 4, img: "../../img/难忘的人4.png" },
          ]);
          // 软件开发流程
          const process = ref([
            {
              id: 1,
              img: "../../img/需求分析.png",
              text: "需求分析",
              img1: "../../img/钱.png",
            },
            {
              id: 2,
              img: "../../img/签订合同.png",
              text: "签订合同",
              img1: "../../img/钱.png",
            },
            {
              id: 3,
              img: "../../img/产品分析.png",
              text: "产品分析",
              img1: "../../img/钱.png",
            },
            {
              id: 4,
              img: "../../img/测试管理.png",
              text: "程序代码",
              img1: "../../img/钱.png",
            },
            {
              id: 5,
              img: "../../img/8_11软件测试.png",
              text: "软件测试",
              img1: "../../img/钱.png",
            },
            {
              id: 6,
              img: "../../img/产品验收.png",
              text: "产品验收",
              img1: "../../img/钱.png",
            },
            {
              id: 7,
              img: "../../img/跟踪售后.png",
              text: "跟踪收获",
              img1: "../../img/钱.png",
            },
          ]);
          // 合作共赢
          const images = ref([
            { id: 1, img: "../../img/百度.png" },
            { id: 2, img: "../../img/优酷.png" },
            { id: 3, img: "../../img/滴滴出行.png" },
            { id: 4, img: "../../img/携程.png" },
            { id: 5, img: "../../img/京东.png" },
            { id: 6, img: "../../img/天猫.png" },
            { id: 7, img: "../../img/高德地图.png" },
            { id: 8, img: "../../img/快手.png" },
            { id: 9, img: "../../img/浦发银行.png" },
            { id: 10, img: "../../img/中国建设银行.png" },
          ]);
          //测试函数
          //h5页面必须把名称return，vite中不需要（重要区别）
          return {
            list,
            photo,
            process,
            images,
            toplist,
          };
        },
      });
      //应用vue（就是挂载在上面ID绑定的元素上）
      demo1.mount("#demo1");

      // 轮播图
      var mySwiper = new Swiper(".swiper", {
        autoplay: {
          delay: 2000,
        },
        loop: true, //循环模式选项// 如果需要滚动条
        pagination: {
          el: ".swiper-pagination",
        },
      });
    </script>
  </body>
</html>
